﻿<!DOCTYPE html>
<html lang="en">

<head>
    <title>note</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="icon" href="/favicon.ico">

    <!-- 引入 layui-vue 样式 -->
    <link rel="stylesheet" type="text/css" href="/css/layui-vue.css">

    <!-- 引入 Vue 3, 使用全局变量 Vue -->
    <script src="/js/vue.js"></script>

    <!-- 引入 layui-vue 组件库, 使用全局变量 LayuiVue -->
    <script src="/js/layui-vue.js"></script>

    <!-- toastui编辑器 -->
    <link rel="stylesheet" href="/css/toastui-editor.min.css">
    <!-- 语法高亮 -->
    <link rel="stylesheet" href="/css/prism.min.css">
    <link rel="stylesheet" href="/css/highlight.min.css">

    <style type="text/css">
        ::-webkit-scrollbar {
            width: 1px !important;
            background-color: #da8e02 !important;
        }

        .side-left {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .notebook-list-div {
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow: hidden;
            background-color: #30333c;
        }

        .notebook-header {
            /* background-color: #30333c; */
            /* height: 50px; */
            line-height: 50px;
            justify-content: center;
            display: flex;
            align-items: center;
        }

        .notebook-head-title {
            margin-right: 35px;
            font-size: 16px;
            font-weight: 400;
        }

        .notebook-list {
            width: 150px;
            height: 100%;
            min-height: 580px;
            border-radius: unset;
            overflow-y: auto;
        }

        .removeNotebook:hover {
            cursor: pointer;
        }

        .removeNotebook {
            margin-right: 15px;
        }

        .addNotebook:hover {
            cursor: pointer;
        }


        .layui-nav {
            padding: unset !important;
        }

        .notebook-item {
            width: 100%;
            text-align: center;
            line-height: 38px !important;
        }

        .layui-nav-tree .layui-nav-item span {
            margin-left: unset !important;
        }

        .layui-this,
        .layui-this>a:hover {
            background-color: #009688;
            color: #fff;
        }

        .note-header {
            line-height: 50px;
            justify-content: space-between;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }

        .note-head-title {
            font-size: 16px;
            font-weight: 400;
            color: darkcyan;
        }

        .addNote:hover {
            cursor: pointer;
        }

        .removeNote {
            margin-right: 20px;
        }

        .removeNote:hover {
            cursor: pointer;
        }

        .note-item {
            margin: 10px;
            padding: 10px;
            color: black;
        }

        .note-item:hover {
            cursor: pointer;
        }

        .note-list {
            min-height: calc(100vh - 60px);
            max-height: calc(100vh - 52px);
            overflow-x: hidden;
            overflow-y: auto;
        }




        .content {
            display: flex;
            align-items: stretch;
            justify-content: center;
            color: white;
        }

        .md-title {
            height: 50px;
        }

        .md-title input {
            height: 50px;
            border: solid 0.5px #8321f3 !important;
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;
        }
    </style>
</head>

<body>
    <div id="app">
        <lay-layout class="main" style="height: 100vh;">
            <!-- 笔记本栏 -->
            <lay-side class="side-left" style="width: 150px;">
                <div class="notebook-list-div">
                    <!-- 笔记本头部 -->
                    <div class="notebook-header">
                        <span class="notebook-head-title">笔记本</span>
                        <!-- 删除 -->
                        <lay-icon class="removeNotebook" type="layui-icon-subtraction" color="red" v-on:click="removeNotebook()"></lay-icon>
                        <!-- 添加 -->
                        <lay-icon class="addNotebook" type="layui-icon-addition" color="orange" v-on:click="addNotebook()">
                        </lay-icon>
                    </div>
                    <!-- 笔记本列表 -->
                    <lay-menu class="notebook-list" v-model:selected-key="notebookSelectedKey">
                        <lay-menu-item class="notebook-item" :id="notebook" v-on:click="notebookClick()"
                            v-for="(notebook,index) in notebooks" :key="index">{{notebook}}</lay-menu-item>

                    </lay-menu>
                    <!-- 底部 -->
                    <div style="display: flex;flex-direction: column; justify-content:center;margin-top: 10px;">
                        <lay-button type="primary" size="sm" style="margin: 0 15px;">
                            <lay-icon type="layui-icon-upload-drag" style="vertical-align: middle;"></lay-icon>同步到云端
                        </lay-button>
                        <lay-button type="normal" size="sm" style="margin: 20px 15px;">
                            <lay-icon type="layui-icon-download-circle" style="vertical-align: middle;"></lay-icon>同步到本地
                        </lay-button>
                    </div>
                </div>
            </lay-side>

            <!-- 笔记栏 -->
            <lay-side class="side-left" style="width: 250px;">
                <div
                    style="display:flex;flex-direction: column;height: 100%;width: 100%;overflow: hidden;background-color: #ccc;">
                    <!-- 笔记头部 -->
                    <div class="note-header">
                        <span class="note-head-title">笔记</span>
                        <div>
                            <!-- 删除 -->
                            <lay-icon class="removeNote" type="layui-icon-subtraction" color="red"
                                v-on:click="removeNote()"></lay-icon>
                            <!-- 添加 -->
                            <lay-icon class="addNote" type="layui-icon-addition" color="blue" v-on:click="addNote()">
                            </lay-icon>
                        </div>
                    </div>

                    <!-- 笔记列表 -->
                    <div class="note-list" style="height:100%;background-color:whitesmoke;width:100%;color:#222;">
                        <lay-panel class="note-item" v-for="(note,index) in notes" :key="index"
                            v-on:click="noteClick(note)">
                            {{note}}
                        </lay-panel>
                    </div>
                    <!-- <lay-scroll height="100%" style="background-color:whitesmoke;width:100%;">
                        <lay-panel class="note-item" v-for="(note,index) in notes" :key="index"
                            v-on:click="noteClick(note)">
                            {{note}}
                        </lay-panel>
                    </lay-scroll> -->
                </div>
            </lay-side>

            <!-- 编辑器栏 -->
            <lay-body class="content">
                <div style="display: flex;width: 100%;flex-direction: column;overflow: hidden;">
                    <!-- 标题输入框 -->
                    <lay-input class="md-title" v-model="mdTitle" placeholder="文章标题"></lay-input>

                    <!-- markdown编辑器 -->
                    <div id="editor" style="width: 100%;"></div>
                </div>
            </lay-body>
        </lay-layout>

        <!-- 弹出表单 -->
        <lay-layer title="添加笔记本" v-model="addNotebookFormShow" move="true">
            <div style="margin: 20px;">
                <lay-form-item label="笔记本名称">
                    <lay-input v-model="newNotebookName"></lay-input>
                </lay-form-item>
                <lay-form-item>
                    <lay-button v-on:click="addNotebookSubmit()">提交</lay-button>
                </lay-form-item>
            </div>
        </lay-layer>
    </div>



    <!-- toastui编辑器 -->
    <script src="/js/toastui-editor-all.min.js"></script>

    <!-- 语法高亮 -->
    <script src="/js/highlight-all.min.js"></script>
    <!-- axios -->
    <script src="/js/axios.min.js"></script>

    <script type="text/javascript">
        const { createApp, ref, reactive, onMounted } = Vue;

        const { layer } = LayuiVue;
        const Editor = toastui.Editor;
        const { codeSyntaxHighlight } = Editor.plugin;

        const App = {
            setup() {
                const notebooks = ref([]);  // 笔记本列表数据
                const notes = ref([]);  // 笔记列表数据
                const notebookSelectedKey = ref("0");   // 选中笔记本
                const addNotebookFormShow = ref(false); // 是否显示添加表单
                const mdTitle = ref("");    // 文章标题
                const mdText = ref("");    // 文章内容
                const newNotebookName = ref(""); // 新建笔记本名称

                const currentNotebook = ref(""); // 当前笔记本
                const currentNote = ref(""); // 当前笔记

                // 编辑器对象
                var editor;


                // 添加笔记本-显示添加表单
                const addNotebook = () => {
                    addNotebookFormShow.value = !addNotebookFormShow.value;
                };

                // 添加笔记本-提交添加
                const addNotebookSubmit = () => {
                    var name = newNotebookName.value.trim();
                    if (!name) {
                        layer.msg("请输入笔记本名称", { icon: 3, time: 500 });
                        return;
                    }
                    axios.post('/notebook/add',
                        { Name: name })
                        .then(res => {
                            if (res.data.code != 200) {
                                layer.msg(res.data.msg, { icon: 2, time: 1000 });
                                return;
                            }
                            layer.msg("添加成功", { icon: 1, time: 600 });
                            newNotebookName.value = "";
                            addNotebookFormShow.value = !addNotebookFormShow.value;
                            notebooks.value.push(name);
                        })
                        .catch(err => console.log(err));
                };

                // 删除笔记本
                const removeNotebook = () => {
                    var notebook = currentNotebook.value;
                    if (notebook == "") {
                        layer.msg("请选中要删除的笔记本", { icon: 3, time: 1000 });
                        return;
                    }

                    layer.confirm(`确认删除笔记本 '${notebook}' 吗？将删除其中所有笔记。`,
                        {
                            btn: [
                                {
                                    text: '删除', callback: () => {
                                        axios.delete('/notebook/remove',{
                                            params:{ 
                                                currentNotebook: notebook,
                                            }
                                        }).then(res => {
                                            if (res.data.code != 200) {
                                                layer.msg("删除失败：" + res.data.msg, { icon: 2, time: 1000 });
                                                return;
                                            }
                                            layer.msg("删除成功", { icon: 1, time: 600 });
                                            // 当前笔记置空
                                            currentNotebook.value = "";

                                            // 更新数据
                                            notebooks.value.splice(notebooks.value.indexOf(notebook), 1);
                                            // 清空笔记列表数据
                                            notes.value = [];

                                            // 关闭询问框
                                            layer.closeAll();
                                        }).catch(err => {
                                            console.log('错误: ' + err);
                                        });

                                        return;
                                    }
                                },
                                {
                                    text: '取消', callback: () => {
                                        // 关闭询问框
                                        layer.closeAll();
                                        return;
                                    }
                                }
                            ]
                        });
                };


                // 笔记本被点击(打开笔记本)
                const notebookClick = () => {
                    // console.log(notebookSelectedKey.value);
                    // 当前笔记本
                    currentNotebook.value = notebookSelectedKey.value;
                    // 当前笔记置空
                    currentNote.value = "";

                    // 获取当前笔记本下的全部笔记
                    axios.get('/notebook/allNote',{
                          params: {
                              currentNotebook: currentNotebook.value
                          }
                     }).then(res => {
                        if (res.data.code != 200) {
                            layer.msg(res.data.msg, { icon: 2, time: 1000 });
                            return;
                        }
                        notes.value = res.data.data;
                    }).catch(err => {
                        console.log('错误: ' + err);
                    });
                }


                // 添加临时笔记
                const addNote = () => {
                    // console.log(currentNotebook.value);
                    axios.post('/note/add',
                        { CurrentNotebook: currentNotebook.value }
                    ).then(res => {
                        if (res.data.code != 200) {
                            layer.msg("创建失败：" + res.data.msg, { icon: 2, time: 1000 });
                            return;
                        }
                        notes.value.unshift(res.data.data);
                        layer.msg("创建成功", { icon: 1, time: 600 });
                    }).catch(err => {
                        console.log('错误: ' + err);
                    });
                }

                // 删除笔记
                const removeNote = () => {
                    var notebook = currentNotebook.value;
                    var note = currentNote.value;
                    if (notebook == "" || note == "") {
                        layer.msg("请选中要删除的笔记", { icon: 3, time: 1000 });
                        return;
                    }

                    layer.confirm(`确认删除 '${notebook}  \\  ${note}' 吗？`,
                        {
                            btn: [
                                {
                                    text: '删除', callback: () => {
                                        axios.delete('/note/remove',{
                                            params:{ 
                                                currentNotebook: notebook,
                                                currentNote: note
                                            }
                                        }).then(res => {
                                            if (res.data.code != 200) {
                                                layer.msg("删除失败：" + res.data.msg, { icon: 2, time: 1000 });
                                                return;
                                            }

                                            layer.msg("删除成功", { icon: 1, time: 600 });
                                            // 置空当前笔记
                                            currentNote.value = "";
                                            // 置空标题
                                            mdTitle.value = "";
                                            // 置空内容
                                            mdText.value = "";

                                            // 重新载入当前笔记本下的全部笔记
                                            axios.get('/notebook/allNote', {
                                                params:{
                                                    currentNotebook: notebook
                                                }
                                            }).then(res => {
                                                if (res.data.code != 200) {
                                                    layer.msg(res.data.msg, { icon: 2, time: 1000 });
                                                    return;
                                                }
                                                notes.value = res.data.data;
                                            });
                                            // 关闭询问框
                                            layer.closeAll();
                                        }).catch(err => {
                                            console.log('错误: ' + err);
                                        });

                                        return;
                                    }
                                },
                                {
                                    text: '取消', callback: () => {
                                        // 关闭询问框
                                        layer.closeAll();
                                        return;
                                    }
                                }
                            ]
                        });
                }

                // 笔记被点击(打开笔记)
                const noteClick = (note) => {
                    // 设置当前笔记
                    currentNote.value = note;

                    axios.get('/note/open',{
                        params:{
                            currentNotebook: currentNotebook.value,
                            currentNote: note
                        }
                    }).then(res => {
                        if (res.data.code != 200) {
                            layer.msg("读取笔记失败：" + res.data.msg, { icon: 2, time: 1000 });
                            return;
                        }
                        mdTitle.value = note;
                        editor.setMarkdown(res.data.data);
                    }).catch(err => {
                        console.log('错误: ' + err);
                    });
                }



                // 生命周期，挂载完成
                onMounted(() => {
                    // 获取全部笔记本
                    axios.get('/notebook/all')
                        .then(res => {
                            if (res.data.code != 200) {
                                layer.msg(res.data.msg, { icon: 2, time: 1000 });
                                return;
                            }
                            notebooks.value = res.data.data;
                        })
                        .catch(err => {
                            console.log('错误: ' + err);
                        });


                    // 初始化编辑器
                    editor = new Editor({
                        el: document.querySelector('#editor'),
                        height: '100%',
                        initialEditType: 'markdown',
                        previewStyle: 'vertical',
                        usageStatistics: false,
                        plugins: [codeSyntaxHighlight]
                    });

                    // 自定义保存命令markdown
                    editor.addCommand('markdown', 'save', function () {
                        // console.log('自定义命令save被调用');
                        // 获取Markdown内容
                        var content = editor.getMarkdown();
                        // 保存内容
                        saveNote(content);
                    });

                    // 自定义保存命令wysiwyg
                    editor.addCommand('wysiwyg', 'save', function () {
                        // console.log('自定义命令save被调用');
                        // 获取Markdown内容
                        var content = editor.getMarkdown();
                        // 保存内容
                        saveNote(content);
                    });

                    // 插入自定义工具按钮
                    editor.insertToolbarItem({ groupIndex: 0, itemIndex: 0 }, {
                        name: 'saveBtn',
                        tooltip: '保存',
                        command: 'save',
                        text: '保存',
                        className: 'toastui-editor-toolbar-icons first',
                        style: { backgroundImage: 'none', color: '#de8809', fontWeight: 'bold' },
                    });


                    // 保存笔记函数
                    function saveNote(content) {
                        // 笔记标题
                        var noteTitle = mdTitle.value;

                        // 笔记标题为空或为临时文件名则返回
                        if (noteTitle == "" || /^\d+$/.test(noteTitle)) {
                            layer.msg("请输入标题", { icon: 3, time: 1000 });
                            return;
                        }
                        // 提交保存
                        axios.post('/note/save',
                            {
                                CurrentNotebook: currentNotebook.value,
                                CurrentNote: currentNote.value,
                                NoteTitle: noteTitle,
                                Content: content
                            }
                        ).then(res => {
                            if (res.data.code != 200) {
                                layer.msg("保存失败：" + res.data.msg, { icon: 2, time: 1000 });
                                return;
                            }
                            layer.msg("保存成功", { icon: 1, time: 600 });
                            // 重置当前笔记名称
                            currentNote.value = noteTitle;

                            // 重新载入当前笔记本下的全部笔记
                            axios.get('/notebook/allNote',{
                                params:{
                                    currentNotebook: currentNotebook.value
                                }
                            }).then(res => {
                                if (res.data.code != 200) {
                                    layer.msg(res.data.msg, { icon: 2, time: 1000 });
                                    return;
                                }
                                notes.value = res.data.data;
                            });

                        }).catch(err => {
                            console.log('错误: ' + err);
                        });
                    }

                });



                return {
                    notebooks,
                    notes,
                    notebookSelectedKey,
                    addNotebook,
                    addNotebookFormShow,
                    newNotebookName,
                    addNotebookSubmit,
                    removeNotebook,
                    notebookClick,
                    addNote,
                    removeNote,
                    noteClick,
                    mdTitle,
                }
            }
        };

        const app = createApp(App);
        app.use(LayuiVue);
        app.mount('#app');
    </script>
</body>




</html>